<template>
  <div class="">
    <el-tree ref="treeRef" node-key="value" :highlight-current="true" :default-expand-all="true"
      :data="treeData[Number(orgType) - 1]" :default-checked-keys="chooseNode" :props="defaultProps"
      @node-click="handleNodeClick">
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <el-tooltip v-if="node.label.length > 18" class="box-item" effect="dark" :content="node.label"
            placement="top">
            <span>{{ node.label }}</span>
          </el-tooltip>
          <span v-else>{{ node.label }}</span>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
const props = defineProps({
  orgType: {
    type: String,
    default: '1'
  },
  activeStep: {
    type: [String, Number],
    default: '0'
  }
})

const defaultProps = {
  children: 'children',
  label: 'label'
}
const treeData = ref([
  [
    {
      label: '封面',
      value: '0'
    },
    {
      label: '一、基本信息',
      value: '1'
    },
    {
      label: '二、负责人名单',
      value: '2'
    },
    {
      label: '三、内部建设情况',
      value: '三',
      children: [
        {
          label: '（一）登记、备案事项变更情况',
          value: '3'
        },
        {
          label: '（二）会议及换届情况',
          value: '4'
        },
        {
          label: '（三）内部管理情况',
          value: '5'
        },
        {
          label: '（四）机构设置情况',
          value: '6'
        },
        {
          label: '（五）党建工作情况',
          value: '7'
        }
      ]
    },
    {
      label: '四、财务会计报告',
      value: '8',
      children: [
        {
          label: '（一）资产负债表',
          value: '8'
        },
        {
          label: '（二）业务活动表',
          value: '9'
        },
        {
          label: '（三）现金流量表',
          value: '10'
        }
      ]
    },
    {
      label: '五、业务活动情况',
      value: '11',
      children: [
        {
          label: '（一）工作总结、计划',
          value: '11'
        },
        {
          label: '（二）会费、收费情况',
          value: '12'
        },
        {
          label: '（三）接受捐赠资助使用',
          value: '13'
        },
        {
          label: '（四）公益慈善、支出、职能、事项',
          value: '14'
        },
        {
          label: '（五）展览会、博览会、交易会、评比达标表彰活动',
          value: '15'
        }
      ]
    },
    {
      label: '六、援藏、乡村振兴、成渝建设',
      value: '16',
      children: [
        {
          label: '（一）支援西藏昌都、乡村振兴',
          value: '16'
        },
        {
          label: '（二）成渝经济圈建设',
          value: '17'
        }]
    },
    {
      label: '八、接受监督检查情况',
      value: '18'
    }, {
      label: '七、其他需要说明的情况',
      value: '19'
    },
    {
      label: '九、年检审核意见',
      value: '20'
    },
    {
      label: '十、承接政府购买情况',
      value: '21'
    },
    {
      label: '十一、附件材料',
      value: '22'
    },
    {
      label: '十二、理事、监事情况',
      value: '23'
    }
  ],
  [
    {
      label: '封面',
      value: '0'
    },
    {
      label: '一、基本信息',
      value: '1',
      children: [
        {
          label: '（一）基本信息',
          value: '1'
        },
        {
          label: '（二）从业人员',
          value: '2'
        },
        {
          label: '（三）负责任人情况',
          value: '3'
        },
        {
          label: '（四）理事会、监事成员情况',
          value: '4'
        },
      ]
    },
    {
      label: '二、内部建设情况',
      value: '二',
      children: [
        {
          label: '（一）内设机构情况',
          value: '5'
        },
        {
          label: '（二）内部建设情况',
          value: '6'
        }
      ]
    },
    {
      label: '三、接受监督检查情况',
      value: '7'
    },
    {
      label: '四、本年度开展活动情况',
      value: '四',
      children: [
        {
          label: '（一）在本行政区域内开展公益活动情况',
          value: '8'
        },
        {
          label: '（二）承接政府委托职能、购买服务项目、政府补贴情况',
          value: '9'
        },
        {
          label: '（三）参加国际交流与合作情况',
          value: '（三）',
          children: [
            {
              label: '（1）参加国际会议和出访情况、在境外设立机构情况',
              value: '10'
            },
            {
              label: '（2）外交流合作、参加国际组织',
              value: '11'
            },
            {
              label: '（3）对外活动主要成绩、问题和管理政策建议',
              value: '12'
            }]
        },
        {
          label: '（四）举办刊物及公益活动',
          value: '13'
        },
        {
          label: '（五）举办研讨会、论坛活动情况',
          value: '13'
        },
        {
          label: '（六）举办评比达标表彰情况',
          value: '13'
        },
        {
          label: '（七）支援和计划支援西藏昌都建设、参与和计划乡村振兴工作情况',
          value: '14'
        },
        {
          label: '（八）参与和计划成渝地区双城经济圈建设情况',
          value: '15'
        }
      ]
    },
    {
      label: '五、年度工作报告',
      value: '16'
    },
    {
      label: '六、年检审核意见',
      value: '17'
    },
    {
      label: '七、财务情况报告',
      value: '七',
      children: [
        {
          label: '（一）资产负债表',
          value: '18'
        },
        {
          label: '（二）业务活动表',
          value: '19'
        },
        {
          label: '（三）现金流表',
          value: '20'
        },
        {
          label: '（四）接受捐赠资助情况和使用情况',
          value: '21'
        },
        {
          label: '（五）公益慈善活动支出',
          value: '22'
        }
      ]
    }, {
      label: '八、党建工作情况',
      value: '23'
    }, {
      label: '九、上年度整改情况表',
      value: '24'
    }, {
      label: '十、附件材料',
      value: '25'
    }
  ]
])
const chooseNode = ref([] as any)
const treeRef = ref();
watch(() => props.activeStep, (newValue, oldValue) => {
  // 当prop的值发生变化时，这里的代码会被执行
  if (treeRef.value) treeRef.value.setCurrentKey(newValue)//data[0].id为默认选中的节点
});

const emit = defineEmits(['backStep'])

const handleNodeClick = (data) => {
  emit('backStep', data.value)
}
</script>
<style lang="scss" scoped>
::v-deep .el-tree-node__label {
  font-size: 12px !important;
}

.custom-tree-node {
  font-size: 12px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
